Page({
  data: {
    scrollTop: 0,
    scrollIntoView: "",
    cityList: [],
    groupList: [],
  },

  onLoad() {
    // 先获取缓存中的数据
    const cities = wx.getStorageSync("cities");
    if (cities.length) {
      // 成功
      const cityList = this.formatCities(cities);
      const groupList = cityList.map((item) => item.group);
      this.setData({
        cityList,
        groupList,
      });
      return;
    }

    this.getCityList();
  },

  // 初始化节点信息
  initNode() {
    // 查询节点信息
    const query = wx.createSelectorQuery();
    query
      .select("#item-B")
      .boundingClientRect((res) => {
        console.log("res", res);
      })
      .exec();
  },

  getCityList() {
    wx.request({
      url: "https://m.maizuo.com/gateway?k=5435456",
      method: "GET",
      header: {
        "X-Host": "mall.film-ticket.city.list",
      },
      success: ({ data }) => {
        if (data.status !== 0) {
          wx.showToast({
            icon: "none",
            title: data.msg,
          });
          return;
        }

        // 成功
        const cityList = this.formatCities(data.data.cities);
        const groupList = cityList.map((item) => item.group);
        this.setData({
          cityList,
          groupList,
        });

        // 执行 initNode
        this.initNode();
      },
    });
  },

  // 处理原始城市列表数据，返回页面需要的列表数据
  formatCities(cities) {
    let result = []; // 结果集合

    // 循环城市数据
    cities.forEach((city) => {
      // 1. 获取当前 city 的拼音首字母
      const groupName = city.pinyin.charAt(0).toUpperCase();

      // 2. 判断当前 groupName 在 result 中，是否已经有相关的对象了。
      const index = result.findIndex((item) => item.group === groupName);
      if (index > -1) {
        // 存在，就操作 result[index].children.push(city) 追加
        result[index].children.push(city);
      } else {
        // 不存在，就将当前 city 组装写入。
        result.push({
          group: groupName,
          children: [city],
        });
      }
    });

    return result.sort((a, b) => {
      return a.group.charCodeAt(0) - b.group.charCodeAt(0);
    });
  },

  // 右侧点击跳转方案一、获取距离来设置
  //   handleJump(event) {
  //     // 1. 获取到参数
  //     const { item } = event.target.dataset;
  //     // 2. 根据 item 找到对应的左侧元素的节点信息
  //     const query = wx.createSelectorQuery();
  //     query
  //       .select(`#item-${item}`)
  //       .boundingClientRect((res) => {
  //         console.log(res);
  //         // 3. 将 res.top 赋值给 scrollTop 即可
  //         this.setData({
  //             scrollTop: res.top + this.data.scrollTop
  //         })
  //       })
  //       .exec();
  //   },

  // 右侧点击跳转方案二、直接设置 scroll-intro-view 的值
  //      PS: scroll-view 组件上 scroll-top 不能与 scroll-into-view 共存
  handleJump(event) {
    // 1. 获取到参数
    const { item } = event.target.dataset;
    // 2. 将 item 赋值给 scroll-intro-view
    this.setData({
      scrollIntoView: `item-${item}`,
    });
  },

  // 城市点击选择
  handleSelect(event) {
    const { city } = event.target.dataset;
    // const { cityId } = city;
    // console.log(cityId);
    // 将当前选择的城市，存储一下，供别的页面使用
    wx.setStorageSync("city", city);

    // 获取到 EventChannel 对象
    const eventChannel = this.getOpenerEventChannel();
    // 调用 eventChannel.emit 来触发事件
    eventChannel.emit("abcd");

    // 返回到电影列表页面
    wx.navigateBack();
  },
});
